<template>
  <div class="">
    <SearchContainer @search="getData" @reset="() => formRef.resetFields()">
      <a-form ref="formRef" class="form-style-flex" :model="formState">
        <a-form-item name="zjm" class="w-[340px]">
          <a-input v-model:value="formState.zjm" placeholder="装备名称/助记码/装备代码/设备序列号/报修单号" />
        </a-form-item>

        <a-form-item name="dateRange" label="报修时间" class="w-[300px] ml-4">
          <a-range-picker v-model:value="formState.dateRange" format="YYYY-MM-DD" :allow-clear="false" value-format="YYYY-MM-DD" @change="data" />
        </a-form-item>
      </a-form>
    </SearchContainer>
    <a-card class="mt-2">
      <div class="flex">
        <a-button class="mb-2 mr-2" type="primary" @click="onCLickEdit"> 添加 </a-button>
        <BaseExport type="战救" name="故障保修" code="000595" :search-params="formState">导出</BaseExport>
      </div>
      <BaseTable :scroll="{ x: 1600 }" :data-source="tableData" fill :loading="loading" column-code="000595" :pagination="pagination">
        <template #bodyCell="{ column, index, record }">
          <template v-if="column.dataIndex === 'NO'">
            {{ index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'equipmentName'">
            <MedicineInfo :value="{ mc: record.equipmentName, gg: record.specifications, cj: record.manufacturer }" />
          </template>
          <template v-if="column.dataIndex === 'id'">
            <PopoverTable :config="detailConfig" :width="800" :params="{ repairId: record.id }">
              <template #bodyCell="{ column: popColumn, record: popRecord }">
                <template v-if="popColumn.dataIndex === 'repairResultsCode'">
                  {{ popRecord.repairResultsCode === '0' ? '修复成功' : '修复失败' }}
                </template>
              </template>
              {{ record.id }}
            </PopoverTable>
          </template>
          <template v-if="column.dataIndex === 'userManualName'">
            <a :href="record.userManualUrl" :title="record.userManualName">{{ record.userManualName }}</a>
          </template>
          <template v-if="column.dataIndex === 'action'">
            <a-space>
              <BaseButton confirm-text="确认删除？" type="link" danger size="small" @click="onCLickDel(record)"> 删除 </BaseButton>
              <BaseButton type="link" size="small" @click="onCLickMaintenance(record)"> 维修 </BaseButton>
              <BaseExport type="战救" name="报修详情" size="small" code="000596" button-type="link" :search-params="record">导出</BaseExport>
              <!-- <BaseButton type="link" size="small" @click="onCLickExport(record)"> 导出 </BaseButton> -->
              <BaseButton type="link" size="small" @click="getDetailData(record)"> 打印 </BaseButton>
              <!-- <a-button v-print="{ id: 'printMe' }" size="small" type="link" class="ml-2">打印</a-button> -->
            </a-space>
          </template>
        </template>
      </BaseTable>
    </a-card>
    <Edit v-model:open="editOpen" :row-data="rowData" @success="onSuccess" />
    <div class="absolute top-[-9999px] hidden">
      <a-button ref="printMe" v-print="{ id: 'printMe' }">打印</a-button>
      <PrintView id="printMe" :data-list="dataSource" :row-data="rowData" />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { message } from 'ant-design-vue'
import SearchContainer from '@/components/SearchContainer'
import BaseTable from '@/components/BaseTable'
import Edit from './Edit.vue'
import PrintView from './PrintView.vue'

const router = useRouter()
const editOpen = ref(false)
const rowData = ref({})
const formRef = ref(null)
const printMe = ref(null)

const detailConfig = ref({
  url: '/war/equipmentRepairFeedback/getEquipmentRepairFeedbackList',
  columnCode: '000596',
  rowKey: 'id',
  formatResult: (data) => {
    return data.map((item, index) => ({
      ...item,
      NO: index + 1
    }))
  }
})

const formState = ref({
  dateRange: [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]
})
const onSuccess = () => {
  getData()
}
const onCLickMaintenance = (record) => {
  router.push({
    path: '/hygiene-equip/repair/maintenance',
    query: {
      id: record.id
    }
  })
}
const dataSource = ref([])

const getDetailData = async (record) => {
  rowData.value = { ...record }
  const { data, code } = await post('/war/equipmentRepairFeedback/getEquipmentRepairFeedbackList', {
    repairId: record?.id
  })
  if (code === 0) {
    dataSource.value = data
    printMe.value.$el.click()
  }
}
const { loading, tableData, getData, pagination } = useTable({
  url: '/war/equipmentRepair/getEquipmentRepairList',
  immediate: true,
  formatParams: () => {
    return {
      startDate: formState.value.dateRange?.[0],
      endDate: formState.value.dateRange?.[1],
      ...formState.value
    }
  }
})
const onCLickDel = async (record) => {
  const { code, msg } = await post('/war/equipmentRepair/doDelEquipmentRepair', { id: record.id, status: 0 })
  if (code !== 0) return message.error(msg || '操作失败')
  message.success(msg || '操作成功')
  getData()
}

const onCLickEdit = (record = {}) => {
  rowData.value = record
  editOpen.value = true
}

onMounted(() => {
  getData()
})
</script>
